<template>
	<view class="container">

		<!-- 介绍页开始 -->
		<view v-if="canSeeCheckupDepressedIntro" class="start-page" :style="{
          backgroundImage:'url('+staticImgs.bg+')'
       }">
			<u-navbar leftIconColor="#fff" placeholder @leftClick="backToPage" bgColor="transparent" />
			<view class="btn-wrapper-pos">
				<view class="btn-wrapper" :style="{
              backgroundImage:'url('+staticImgs.btnBg+')'
           }" @click="changeInfoPageStatus(1)">
					开启青少年抑郁双相诊断
					<view class="abs-hand">
						<image class="img loop-pointer" :src="staticImgs.handImg" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 介绍页结束 -->

		<!-- 主页面开始 -->
		<view v-else-if="loadDataOk" class="main-page" :style="{
          backgroundImage:'url('+mainBg+')'
       }">
			<u-navbar leftIconColor="#fff" placeholder @leftClick="backToPage" bgColor="transparent" />



			<template>
				<template v-if="page == 'result'">
					<view class="tit-report">
						<image class="img" :src="staticImgs.titReport" mode="widthFix"></image>
					</view>
				</template>
				<template v-else-if="page != 'total'">
					<view class="tit" style="z-index: 10;">
						<image class="img" :src="staticImgs.tit" mode="widthFix"></image>
					</view>
					<view class="checkup-ad" v-if="adBoxShow" @click="toCheckup">
						<view class="img" :style="{backgroundImage: `url(${staticImgs.adBox})`}" mode="widthFix">
              <view class="checkup-price-box flex-cc" v-if="checkupPrice">
                <view class="checkup-price">{{checkupPrice}}</view>
                <view class="checkup-sum-price-wrapper">
                  <view class="checkup-price-unit">元</view>
                  <view class="checkup-sum-price">原价{{checkupSumPrice}}元</view>
                </view>
              </view>
            </view>
						<view class="btn-abs">
							<image class="img loop-pointer" :src="staticImgs.adBtn" mode="widthFix" />
						</view>
					</view>
				</template>
			</template>


			<template>
				<view class="info-report-wraper" v-if="page == 'result'">
					<view>姓名：{{nickName}}</view>
					<view>诊断日期：{{createTime}}</view>
				</view>
				<view class="info-wraper" v-else-if="page != 'total'">
					<view class="info-l">
						<view class="row-1">姓名：{{nickName}}</view>
						<view class="row-2">诊断日期：{{createTime}}</view>
					</view>
					<view class="info-r" :style="{
                backgroundImage:'url('+ (depressedGrade ? staticImgs.degressActBg : staticImgs.degressBg)+')'
             }" @click="degressBtnHandle">
						<view class="row-1"
							:class="{'has-grade':depressedGrade,'has-grade-a':depressedGrade=='A','has-grade-b':depressedGrade=='B','has-grade-c':depressedGrade=='C','has-grade-d':depressedGrade=='D'}">
							{{degressedGradeStr}}
						</view>
						<template v-if="depressedGrade">
							<view class="row-2 row-has-grade">
								点击查看详情
								<image class="img" :src="staticImgs.degressArrow" mode="widthFix"></image>
							</view>
						</template>
						<template v-else>
							<view class="row-2">完成全部测试解锁</view>
						</template>
					</view>
				</view>
			</template>

			<template v-if="page == 'result'">
				<ResultPage @nav="navHandle" :report="briefReport" :reportId="currentReportId" />
			</template>

			<template v-else-if="page == 'total'">
				<TotalResultPage :report="summaryReport" />
				<view style="height: 150rpx; width: 1px;background-color: transparent;"></view>
			</template>
			<!-- <template v-else> -->
			<template v-else>
				<view class="main-wrapper-pos">
					<!-- :style="{
            backgroundImage:'url('+staticImgs.bgNan+')'
         }" -->

					<view class="main-wrapper-inner">
						<view class="scl-box-pos" v-for="(item,index) in sclBoxList" :key="index" :style="[item.style]">

							<view class="scl-box"
								:class="[{'scl-box-lack':item.status == 0 && item.preStatus != 1},{'inf-box-act-2':index == 4 && item.status ==1}]"
								style="z-index:20">
								<!-- ,'scl-box-animation':item.showAnimation -->
								<view class="info-box" :style="[{
                      backgroundImage:'url('+(item.status ==0 ? staticImgs.boxLockImg : (index == 4 ? staticImgs.boxActImg2 : staticImgs.boxActImg))+')'
                   }]" :class="[{'info-box-act':item.status ==1}]">
									<view class="tit" :class="{'tit-has-report':item.hasReport == 'Y'}">{{item.tit}}
									</view>
									<view class="description"
										:class="{'description-1':item.moduleHealthStatus==='1','description-2':item.moduleHealthStatus == '2','description-3':item.moduleHealthStatus == '3'}">
										{{ item.hasReport == 'N' ? item.sclName : item.statusTxt}}
									</view>
									<!-- <template>
                    <view v-if="item.hasReport == 'N'" class="status">{{item.statusTxt}}</view>
                    <view v-else-if="item.hasReport == 'Y'" class="status"
                      :class="{'report-status':item.reportStatus === 0,'report-status-ok':item.reportStatus === 1}">
                      {{item.statusTxt}}
                    </view>
                  </template> -->
								</view>


								<template v-if="item.status == 1">
									<view class="action" @click="actionHandle(item)"
										:class="[{'action-report':item.hasReport == 'Y'}]">
										<view>{{item.actionTxt}}</view>
										<view class="arrow-img-wrapper">
											<image class="img"
												:src="item.hasReport == 'N' ? staticImgs.arrow : staticImgs.arrowReport"
												mode="widthFix"></image>
										</view>
									</view>
								</template>

								<view class="lock-box-img" v-if="item.status == 0">
									<image class="img" :src="staticImgs.lack" mode="widthFix"></image>
								</view>
								<!-- (sclBoxList.length==4||(sclBoxList.length==5&&(!opts.sclId||opts.sclId!=sclBoxList[0].sclId))) 根据产品提的需求把这个逻辑判断先注释了-->
								<view class="hand-img-pos" :class="{'hand-img-pos-2':index == 4}"
									@click="actionHandle(item)" v-if="item.showGuide&&!isHaveDialog&&loadFlag">
									<view class="hand-img">
										<image class="img loop-pointer" :src="staticImgs.handImg" mode="widthFix">
										</image>
									</view>
								</view>

							</view>
						</view>
					</view>


					<!-- <view class="mask-bg-bottom">
          </view> -->

					<view class="btn-box" @click="showTotalReportHandle"
						:class="{'btn-box-unlocked':isAllReportsUnlocked}">
						<view class="lack-box" v-if="!isAllReportsUnlocked">
							<image class="img" :src="staticImgs.lackSmall" mode="widthFix"></image>
						</view>
						<view>诊断总报告</view>
						<view class="hand-img-pos" v-if="isAllReportsUnlocked">
							<view class="hand-img">
								<image class="img loop-pointer" :src="staticImgs.handImg" mode="widthFix">
								</image>
							</view>
						</view>
					</view>

				</view>
				<view class="pop-box-all" v-if="!isAllReportsUnlocked"></view>

			</template>

		</view>
		<!-- 主页面结束 -->
		<template>

			<DialogMask v-if="isHaveDialog" @click="dialogClose">
				<template #content>
					<text v-if="tipObj.useDivColor">
						<text>
							{{tipObj.outValArr[0]}}
						</text>
						<text :style="{color:tipObj.contentColor}">
							{{tipObj.insertVal}}
						</text>
						<text>
							{{tipObj.outValArr[1]}}
						</text>
					</text>
					<text v-else>
						{{tipObj.content || ''}}
					</text>
				</template>

				<template #btn1 v-if="tipObj.btnNum > 0 && tipObj.leftBtn.txt">
					<view class="btn-normal btn-base" :style="[lStyle]"
						@click.stop="setCurrentTipIndex(tipObj.leftBtn,'leftBtn')">
						{{tipObj.leftBtn.txt}}
					</view>
				</template>
				<template #btn2 v-if="tipObj.btnNum > 1 && tipObj.rightBtn.txt">
					<view class="btn-normal btn-base" :style="[rStyle]"
						@click.stop="setCurrentTipIndex(tipObj.rightBtn,'rightBtn')">
						{{tipObj.rightBtn.txt}}
					</view>
				</template>

			</DialogMask>

		</template>

		<FloatBaclSclList v-if="isShowFloatBack" />
	</view>
</template>

<script>
	import {
		removeEmptyProperty
	} from '@/common/utils/util.js'
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import {
		updateUserInfo
	} from '@/common/api/user_api.js'
	import DialogMask from './DialogMask.vue'
	import ResultPage from './ResultPage.vue'
	import TotalResultPage from './TotalResultPage.vue'
	import FloatBaclSclList from '@/subcontractorC/components/float-back-scl-list/index.vue'

	export default {
		components: {
			DialogMask,
			ResultPage,
			TotalResultPage,
			FloatBaclSclList
		},
		data() {
			return {
				staticImgs: {
					bg: this.imgBaseURL + '/scl/checkup-depressed/start/intro-page-img-new.png',
					btnBg: this.imgBaseURL + '/scl/checkup-depressed/start/btn-bg.png',

					topBg: this.imgBaseURL + '/scl/checkup-depressed/main-top-page-bg.png',
					wrapperBg: this.imgBaseURL + '/scl/checkup-depressed/wrapper-bg.png',
					titReport: this.imgBaseURL + '/scl/checkup-depressed/v2/tit-new-v2.png',
					lack: this.imgBaseURL + '/scl/checkup-depressed/lack.png',
					lackSmall: this.imgBaseURL + '/scl/checkup-depressed/lack-small.png',
					arrow: this.imgBaseURL + '/scl/checkup-depressed/arrow.png',
					boxImg: this.imgBaseURL + '/scl/checkup-depressed/box-img.png',
					lockBoxImg: this.imgBaseURL + '/scl/checkup-depressed/lock-box-img.png',

					adBox: this.imgBaseURL + '/scl/checkup-depressed/v2/checkup-ad-v3.png',
					adBtn: this.imgBaseURL + '/scl/checkup-depressed/v2/checkup-ad-btn.png',
					degressArrow: this.imgBaseURL + '/scl/checkup-depressed/v2/degress-arrow.png',

					bgNan: this.imgBaseURL + '/scl/checkup-depressed/v2/bg-nan-v2.jpg',
					bgNv: this.imgBaseURL + '/scl/checkup-depressed/v2/bg-nv.jpg',
					bgDef: this.imgBaseURL + '/scl/checkup-depressed/v2/bg-def.jpg',
					boxActImg: this.imgBaseURL + '/scl/checkup-depressed/v2/box-act.png',
					boxActImg2: this.imgBaseURL + '/scl/checkup-depressed/v2/box-act-2.png',
					boxLockImg: this.imgBaseURL + '/scl/checkup-depressed/v2/box-lock.png',
					boxActBtnIcon: this.imgBaseURL + '/scl/checkup-depressed/v2/box-act-icon.png',
					boxActBtnBg: this.imgBaseURL + '/scl/checkup-depressed/v2/btn-act-img.png',
					degressBg: this.imgBaseURL + '/scl/checkup-depressed/v2/degress-bg.png',
					degressActBg: this.imgBaseURL + '/scl/checkup-depressed/v2/degress-act-bg.png',
					handImg: this.imgBaseURL + '/scl/checkup-depressed/v2/hand.png',
					lockImg: this.imgBaseURL + '/scl/checkup-depressed/v2/lock-icon.png',
					summaryReportLockBtn: this.imgBaseURL + '/scl/checkup-depressed/v2/summary-report-lock-btn.png',
					tit: this.imgBaseURL + '/scl/checkup-depressed/v2/tit-new-v2.png',
					arrowReport: this.imgBaseURL + '/scl/checkup-depressed/v2/arrow-white.png',
				},
				page: 'start',
				showTipModal: false,
				tipObj: {},
				currentTipIndex: 0,
				tipsList: [],
				isAllReportsUnlocked: true,
				// adBoxShow: false,
				currentReportId: '',
				sclBoxList: [],
				depressedGrade: null,
				degressedGradeStr: '',
				sclBoxListStyle: [
					[ // 0-未选中，1-选中
						{
							left: 0,
							top: 0
						},
						{
							left: 0,
							top: 0,
						}
					],
					[{
						right: 0,
						top: '79rpx',
					}, {
						right: 0,
						top: '50rpx',
					}],
					[{
						left: '28rpx',
						top: '330rpx',
					}, {
						left: 0,
						top: '330rpx',
					}],
					[{
						right: 0,
						top: '380rpx',
					}, {
						right: 0,
						top: '380rpx',
					}],
					[{
						left: '136rpx',
						top: '656rpx',
					}, {
						left: '136rpx',
						top: '656rpx',
					}]
				],
				// canSeeCheckupDepressedIntro: false ,//记得删除
				isPayOk: false,
				loadFlag: false,
				briefReport: {},
				createTime: '',
				summaryReport: {},
				opts: {},
				loadDataOk: false,
				isShowFloatBack: false,
				checkBool: true,
				// mainBg:'',
        checkupPrice: '',
        checkupSumPrice: ''
			}
		},
		computed: {
			...mapState({
				userJson: state => state.user.userJson,
				'isPaySclExamination': state => state.user.isPaySclExamination, //是否已购买测评体检包
			}),
			...mapGetters('user', ['nickName', 'canSeeCheckupDepressedIntro', 'uGender']),
			lStyle() {
				if (this.tipObj.btnNum > 1 && !this.tipObj.leftBtn.style) {
					return {
						backgroundColor: '#5EB7FF'
					}
				} else {
					return this.tipObj?.leftBtn?.style
				}
			},
			rStyle() {
				return this.tipObj?.rightBtn?.style
			},
			adBoxShow() {
				return this.isAllReportsUnlocked == true && !this.isPaySclExamination
			},
			mainBg() {
				let sexCode = this.uGender || 0
				let avatarArr = [this.staticImgs.bgDef, this.staticImgs.bgNan, this.staticImgs.bgNv]
				return avatarArr[sexCode]
			},
			isHaveDialog() {
				return this.showTipModal && this.tipObj && this.tipObj.content
			}
		},
		watch: {
			tipObj(val) {
				if (val && val.content) {
					const content = val.content
					const match = content.match(/\{([^}]+)\}/);
					if (match) {
						val.useDivColor = true
						val.insertVal = match[1]
						const parts = content.split(/\{[^}]*\}/);
						val.outValArr = parts
					}
				}
				console.log(val, '=====val')
				// const match = content.match(/\{([^}]+)\}/);

			}
		},
		onShow() {
			this.$u.api.isPaySclExamination({
				goodsCode: this.$dictMap.CHECKUP_DEPRESSION
			}).then(async ({
				data: res
			}) => {
				this.isPayOk = res.data
				this.checkIsShowFloatBack()
				await this.initDialog()
			})
		},
		onLoad(opts) {
			console.log('opts：', opts)
			this.opts = opts
			// this.mainBg = this.staticImgs.bgDef
			// uni.$on('update-checkup-depressed',(opts)=>{
			// 	this.getPageData();
			// })
			this.getPageData();
      this.$u.api.getCheckUpList().then(res => {
        if (res.data.success) {
          this.checkupPrice = res.data.data.price
          this.checkupSumPrice = res.data.data.sumPrice
        }
      })
		},
		methods: {
			getPageData() {
				this.initData();
			},
			initData() {
				this.$u.api.getDepressionList({
					sclId: this.opts.sclId
				}).then(({
					data: res
				}) => {
					if (!res.success) {
						// 错误提示
						uni.showModal({
							title: res.message,
							showCancel: false,
							confirmText: '回到大厅',
							confirmColor: '#666',
							success: res => {
								if (res.confirm) {
									uni.showLoading()
									uni.reLaunch({
										url: '/pages/sclList/sclList',
										success: () => uni.hideLoading()
									})
								}
							}
						})
						return
					}
					this.sclBoxList = []
					let hasGuideTarget = false
					let actIndex = -1
					this.depressedGrade = (res.data.depressedGrade != '待诊断' && res.data.depressedGrade != '待解锁') ?
						res
						.data.depressedGrade : null
					this.degressedGradeStr = res.data.depressedGrade
					res.data.sclExaminationBOS.map((item, index) => {
						const sclBox = {}
						console.log(item, '===item')

						sclBox.tit = item.remark
						sclBox.sclName = item.sclName
						sclBox.statusTxt = item.healthType
						sclBox.hasReport = item.isSclReport
						sclBox.status = sclBox.hasReport == 'Y' ? 1 : 0
						sclBox.actionTxt = sclBox.hasReport == 'Y' ? '查看结果' : '去检测'
						sclBox.sclId = item.sclId
						sclBox.sclExaminationReprotId = item.sclExaminationReprotId
						sclBox.reportStatus = item.moduleHealthStatus == '1' ? 1 : 0
						sclBox.moduleHealthStatus = item.moduleHealthStatus

						if (this.isAllReportsUnlocked && sclBox.hasReport == 'N') {
							this.isAllReportsUnlocked = false
						}
						if (!hasGuideTarget && sclBox.hasReport == 'N') {
							sclBox.showGuide = true
							sclBox.status = 1
							actIndex = index
							console.log(sclBox, '==sclBox==')

							hasGuideTarget = true
						}

						sclBox.style = this.sclBoxListStyle[index][sclBox.status]

						this.sclBoxList.push(sclBox)
					})

					console.log(this.sclBoxList, '===this.sclBoxList==')

					this.loadDataOk = true
					this.createTime = res.data.createTime
					console.log(res, '----getDepressionList----')

					if (this.opts.reportId) {
						this.actionHandle({
							'sclExaminationReprotId': this.opts.reportId,
							'hasReport': 'Y'
						})
					}


					if (actIndex > -1) {
						this.sclBoxList[actIndex].showAnimation = true
						this.sclBoxList[actIndex].status = 0
						this.sclBoxList[actIndex].showGuide = false
						// setTimeout(()=>{
						this.sclBoxList[actIndex].status = 1
						// setTimeout(()=>{
						this.sclBoxList[actIndex].showGuide = true
						// },300)
						// },1000)
					}

				})
			},
			degressBtnHandle() {
				if (this.depressedGrade) {
					this.showTotalReportHandle()
				}
			},
			navHandle() {
				this.loadFlag = false;
				setTimeout(() => {
					this.checkBool = false
					if (this.isPayOk) {
						this.isShowFloatBack = true
					}
					this.backToPage()
				}, 500)
			},
			initDialog(more) {
				const form = this.$removeEmptyProperty({
					canSeeCheckupDepressedIntro: more ? 'Y' : null,
					sclId: this.opts.sclId
				})
				if (more) {
					this.updateUserJson('canSeeCheckupDepressedIntro', true)
				}
				this.$u.api.getWriterDetail(form).then(({
					data: res
				}) => {
					if (res.code == 200) {
						this.tipsList = res.data.jsonArray

						if (res.data.showKey) {
							this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === res.data.showKey)
							this.currentTipKey = res.data.showKey
							this.tipObj = this.tipsList[this.currentTipIndex]
							this.showTipModal = true
						}
					}
					this.loadFlag = true;
					console.log('getWriterDetail：', res.data)
				})
			},
			checkIsShowFloatBack() {
				if (!this.checkBool) return

				if (!this.isPayOk) {
					return this.isShowFloatBack = false
				}

				//获取上一页的路径，判断是否是sclList
				let allPages = getCurrentPages()
				if (allPages.length > 1) {
					let prePage = allPages[allPages.length - 2]
					if (prePage.route == 'pages/sclList/sclList') {
						return this.isShowFloatBack = false
					}
				}

				this.isShowFloatBack = true
			},
			async setCurrentTipIndex(targetObj, side) {
				const key = targetObj.next
				console.log(this.tipsList[this.currentTipIndex], '---targetObj')

				await this.$u.api.updateDepressionDialogIndex({
					showKey: this.tipsList[this.currentTipIndex].key
				})

				if (targetObj.type == 'close') {
					return this.showTipModal = false
				} else if (targetObj.type == 'skip') {
					console.log(this.fromSclId, targetObj, '-------targetObj')

					if (this.canSeeCheckupDepressedIntro) {
						this.updateUserJson('canSeeCheckupDepressedIntro')
					}
					setTimeout(() => {
						this.checkBool = false
						if (this.isPayOk) {
							this.isShowFloatBack = true
						}
					}, 500)
					return uni.navigateTo({
						url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
							sclId: targetObj.next,
							sclReportType: 2,
							hasOwn: this.isPayOk
						}),
						success: () => {
							this.loadFlag = false;
							this.showTipModal = false
						}
					})

				}

				if (this.currentTipKey == 'Y19') {
					this.changeGender(key == 'Y20' ? 2 : 1)
				}

				this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === key)
				this.currentTipKey = key

				this.tipObj = this.tipsList[this.currentTipIndex]
			},
			changeGender(gender) {
				// this.$refs.tLoading.show()
				updateUserInfo({
					sex: gender
				}).then(res => {
					if (res.data.code == 200) {
						let userInfo = this.$store.getters['user/getUserInfo'];
						console.log(userInfo, '----userInfo----')

						userInfo.sex = gender
						this.$store.commit('user/setUserInfo', userInfo)
					} else {
						this.$showToast(res.data.message)
					}
				}).finally(() => {
					// uni.hideLoading()
					// this.$refs.tLoading.hide()
				})
			},
			showTotalReportHandle() {
				if (!this.isAllReportsUnlocked) {
					return false
				}

				uni.showLoading()
				this.$u.api.getDepressionReportDetail().then(({
					data: res
				}) => {
					console.log('res：', res)
					this.summaryReport = res.data
					this.summaryReport.createTime = this.$dayjs(res.data.createTime).format("YYYY.MM.DD")
					this.$nextTick(() => {
						this.page = 'total'
					})
					uni.hideLoading()
				})
			},
			actionHandle(item) {
				console.log(item, '--item--')
				if (item.hasReport == 'N') {
					if (item.status != 1) {
						return this.$showToast("当前测评暂未解锁")
					}
					this.loadFlag = false;
					setTimeout(() => {
						this.checkBool = false
						if (this.isPayOk) {
							this.isShowFloatBack = true
						}
					}, 500)
					uni.navigateTo({
						url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
							sclId: item.sclId,
							sclReportType: 2,
							hasOwn: this.isPayOk
						})
					})
				} else {
					uni.showLoading()
					this.currentReportId = item.sclExaminationReprotId
					this.$u.api.getDepressionReportDetail({
						sclExaminationReprotId: item.sclExaminationReprotId
					}).then(({
						data: res
					}) => {
						console.log('res：', res)
						const tmpRes = res.data
						this.briefReport = {
							createTime: this.$dayjs(res.data.createTime).format('YYYY.MM.DD'),
							details: tmpRes.t,
							tit: tmpRes.p
						}
						this.page = 'result'
						uni.hideLoading()
					})

				}
				console.log(item, '====item')
			},
			toCheckup() {
				uni.redirectTo({
					url: '/subcontractorC/pages/sclCheckup/sclCheckup?sourceType=3'
				})
			},
			backToPage() {
				if (this.page == 'result' || this.page == 'total') {
					this.report = {}
					this.page = 'main'
				} else {
					uni.reLaunch({
						url: '/pages/sclList/sclList'
					})
				}
			},
			dialogClose() {
				console.log('dialogClose------')
				if (this.currentTipKey != 'Y19') {
					this.showTipModal = false
				}
			},
			async changeInfoPageStatus(status) {
				if (status == 1) {
					// this.updateUserJson('canSeeCheckupDepressedIntro')
					await this.initDialog('canSeeCheckupDepressedIntro')
				}
			},
			updateUserJson(param, useLocal) {
				let tmpJsonStr
				let tmpObj = {}
				try {
					tmpJsonStr = JSON.parse(this.userJson)
					tmpObj = {
						...tmpJsonStr
					}
					tmpObj[param] = 'Y'
					tmpJsonStr = JSON.stringify(tmpObj)
					if (useLocal) {
						this.$store.commit('user/setUserJson', tmpJsonStr)
					} else {
						this.$u.api.updateUserInfo({
							userJson: tmpJsonStr
						}).then(res => {
							console.log(tmpJsonStr, '-------tmpJsonStr------')
							this.$store.commit('user/setUserJson', tmpJsonStr)
						})
					}

				} catch (e) {}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pop-box-all {
		position: fixed;
		left: 0;
		top: 0;
		pointer-events: none;
		// background: rgba(0, 0, 0, 0.4);
		width: 100vw;
		height: 100vh;
	}

	.loop-pointer {
		animation-iteration-count: infinite;
		animation-name: loading;
		animation-duration: 1300ms;
		animation-delay: 0;
		animation-timing-function: ease;
	}

	.container {
		overflow-x: hidden;
		transition: all .8s ease-in-out;
	}

	@keyframes loading {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(.78);
		}

		100% {
			transform: scale(1);
		}
	}


	.start-page {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;

		.btn-wrapper-pos {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 7vh;
		}

		.btn-wrapper {
			width: 480rpx;
			height: 100rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 86rpx;
			text-align: center;
			font-style: normal;

			.abs-hand {
				position: absolute;
				right: -48rpx;
				top: 36rpx;

				bottom: 0;
				width: 108rpx;
				height: 108rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	//.start-page end


	@keyframes unlockAnimation {
		0% {
			transform: scale(1);
			// background-color: blue;
		}

		50% {
			transform: scale(0.8);
			// background-color: purple;
		}

		100% {
			transform: scale(1.2);
			// background-color: red;
		}

		100% {
			transform: scale(1);
			// background-color: red;
		}
	}

	.main-page {
		width: 100vw;
		height: 100%;
		background-size: 100% 100%;
		// background-color: rgba(162, 242, 226, 1);
		background-repeat: no-repeat;
		position: relative;
		min-height: 100vh;
		box-sizing: border-box;

		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;


    >.checkup-ad {
      width: 710rpx;
      height: 160rpx;
      margin: auto;
      margin-bottom: 18rpx;
      margin-top: -14rpx;
      position: relative;

      .img {
        width: 100%;
        height: 100%;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
      }

      >.btn-abs {
        position: absolute;
        top: -3.2rpx;
        right: -4rpx;
        width: 180rpx;
        height: 180rpx;
      }
    }


		>.tit {
			width: 620rpx;
			height: 104rpx;
			margin: auto;
			margin-bottom: 20rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		>.tit-report {
			width: 466rpx;
			height: 78rpx;
			margin: auto;
			margin-top: 0;
			margin-bottom: 0;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		>.info-report-wraper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 680rpx;
			margin: auto;
			margin-top: 0;
			margin-bottom: 0;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 45rpx;
			letter-spacing: 1px;

			font-style: normal;
		}

		.info-wraper {
			display: flex;
			// align-items: center;
			justify-content: space-between;
			width: 710rpx;
			margin: auto;
			background: linear-gradient(270deg, rgba(87, 203, 205, 0.4) 0%, rgba(141, 226, 229, 0.4) 51%, rgba(20, 156, 158, 0.4) 100%);
			border-radius: 16rpx;

			.info-l {
				margin-left: 30rpx;

				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: rgba(255, 255, 255, .9);
				line-height: 42rpx;
				letter-spacing: 1px;
				text-align: left;
				font-style: normal;


				.row-1 {
					margin-top: 34rpx;
					margin-bottom: 12rpx;
				}
			}

			.info-r {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 210rpx;
				height: 140rpx;
				box-sizing: border-box;
				margin: 12rpx;
				margin-right: 30rpx;
				padding-top: 46rpx;



				.row-1 {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #A77A3D;
					line-height: 56rpx;
					letter-spacing: 2px;
					text-align: center;
					font-style: normal;
				}

				.row-2 {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #94754C;
					line-height: 28rpx;
					letter-spacing: 1px;
					text-align: center;
					font-style: normal;
				}

				>.has-grade {
					font-size: 60rpx;
					// color: rgba(81, 164, 152, 1);
				}

				>.has-grade-a {
					color: rgba(30, 172, 15, 1);
				}

				>.has-grade-b {
					color: rgba(44, 126, 114, 1);
				}

				>.has-grade-c {
					color: rgba(255, 160, 58, 1);
				}

				>.has-grade-d {
					color: rgba(211, 106, 106, 1);
				}

				>.row-has-grade {
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgba(81, 164, 152, 1);

					>.img {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.main-wrapper-pos {
			position: relative;
			width: 710rpx;
			// margin: auto;
			// border: 1px solid red;
			// height: 900rpx;
			margin: auto;
			margin-top: 24rpx;

			display: flex;
			align-items: flex-end;
			justify-content: center;
			// padding-bottom: 246rpx;
			box-sizing: border-box;
			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));


			flex: 1;
		}



		.main-wrapper-inner {
			width: 678rpx;
			// height: auto;
			// margin: auto;
			height: auto;
			// height: 76vh;
			margin: auto;
			overflow: scroll;


			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
			// gap: 50rpx 60rpx;
			gap: 12rpx 16rpx;
			padding-bottom: 100rpx;

			.scl-box-pos {
				position: absolute;

			}

			.scl-box {
				position: relative;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				display: flex;
				flex-direction: column;
				align-items: center;

				transition: transform 1s ease-in-out, background-color 1s ease-in-out;

				.info-box {
					width: 230rpx;
					height: 153rpx;

					width: 240rpx;
					height: 164rpx;
					background-repeat: no-repeat;
					background-size: 100% 100%;

					>.tit {
						// font-family: PingFangSC, PingFang SC;
						// font-weight: 500;
						// font-size: 36rpx;
						// color: #16715E;
						// line-height: 50rpx;
						// text-align: center;
						// font-style: normal;

						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 34rpx;
						color: #16715E;
						line-height: 44rpx;
						letter-spacing: 1px;
						text-align: center;
						font-style: normal;


						margin-top: 26rpx;
						margin-bottom: 2rpx;
					}

					>.tit-has-report {
						margin-top: 38rpx;
						margin-bottom: 0;
					}

					>.description {
						height: 60rpx;

						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						transform: scale(0.88);

						color: #256F60;
						line-height: 30rpx;
						letter-spacing: 1px;
						text-align: center;
						font-style: normal;
						margin: auto;

						width: 178rpx;
						height: 60rpx;

						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}

					>.description-1 {
						color: rgba(81, 190, 11, 1);
						width: 190rpx;
						height: 40rpx;

					}

					>.description-2 {
						color: rgba(255, 142, 119, 1);
						width: 190rpx;
						height: 40rpx;

					}

					>.status {
						margin-top: 8rpx;
						margin-bottom: 14rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 40rpx;
						color: #5FC2AE;
						// line-height: 56rpx;
						text-align: center;
						font-style: normal;

						height: 42rpx;
					}

					>.report-status {
						// margin-top: 16rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FB886D;
						// line-height: 42rpx;
						text-align: center;
						font-style: normal;
					}

					>.report-status-ok {
						// margin-top: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #51BE0B;
						// line-height: 50rpx;
						text-align: center;
						font-style: normal;
					}

				}

				.info-box-act {
					width: 240rpx;
					height: 180rpx;

					box-sizing: border-box;
					padding-right: 4rpx;
				}





				.action {
					width: 170rpx;
					height: 52rpx;
					background: linear-gradient(180deg, #FFFFFF 0%, #D1FFFA 100%);
					box-shadow: 0rpx 2rpx 4rpx 0rpx #9FEADC;
					border-radius: 26rpx;
					box-sizing: border-box;

					display: flex;
					align-items: center;
					justify-content: center;

					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #256F60;
					line-height: 52rpx;
					text-align: center;
					font-style: normal;

					>.arrow-img-wrapper {
						width: 24rpx;
						height: 24rpx;

						display: flex;
						justify-content: center;
						align-items: center;

						.img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.action-report {
					background: linear-gradient(180deg, #43EEDD 0%, #349EF7 100%);
					color: #FFFFFF;
				}

				// .img{
				//   width: 100%;
				//   height: 100%;
				// }

				.lock-box-img {
					position: absolute;

					transform: translate(-50%, -50%);
					top: 20rpx;
					left: 20rpx;

					width: 84rpx;
					height: 84rpx;

					.img {
						width: 100%;
						height: 100%;
					}

				}
			}

			.inf-box-act-2 {
				flex-direction: row;

				.info-box-act {
					width: 250rpx !important;
					padding-right: 20rpx !important;
					padding-top: 8rpx !important;
				}
			}

			// .scl-box end

			.scl-box-animation {
				animation: unlockAnimation 1s forwards;
			}


			.scl-box-lack {
				>.tit {
					opacity: 0.5;
				}

				>.description {
					opacity: 0.5;
				}

				>.status {
					opacity: 0.5;
				}

				>.action {
					opacity: 0.5;
				}
			}

			//  .scl-box-lack end

			.hand-img-pos {
				position: absolute;
				right: -46rpx;
				bottom: -120rpx;

				.hand-img {
					width: 160rpx;
					height: 160rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.hand-img-pos-2 {
				bottom: -50rpx;
				right: -120rpx;
			}

		}


		.main-wrapper-pos {

			.mask-bg-bottom {
				position: absolute;
				left: 16rpx;
				right: 16rpx;
				bottom: 16rpx;

				height: 174rpx;
				background: linear-gradient(180deg, transparent 0%, rgba(162, 242, 226, 1) 100%);
				border-radius: 46rpx;
			}

			.btn-box {
				width: 300rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, #C5C5C5 100%);
				border-radius: 40rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #858585;
				// line-height: 48rpx;
				text-align: left;
				font-style: normal;

				position: absolute;
				bottom: 74rpx;
				left: 50%;
				transform: translateX(-50%);

				>.lack-box {
					width: 38rpx;
					height: 38rpx;

					margin-right: 4rpx;

					display: flex;
					align-items: center;
					justify-content: center;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.hand-img-pos {
					position: absolute;
					right: -24rpx;
					bottom: -57rpx;

					.hand-img {
						width: 100rpx;
						height: 100rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}
				}

			}

			// .btn-box end

			.btn-box-unlocked {
				background: linear-gradient(180deg, #FFFFFF 0%, #FFE2B3 100%);
				color: #86570C;
			}
		}


	}

	.btn-base {
		width: 270rpx;
		height: 70rpx;
		border-radius: 45rpx;

		font-family: PingFang-SC, PingFang-SC;
		// font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		font-style: normal;
	}

	.btn-normal {
		background: #5ED5FF;
	}

	//.main-page end

  .checkup-price-box {
    position: absolute;
    top: 70rpx;
    left: 368rpx;
    transform: scaleX(0.9);

    .checkup-price {
      font-weight: bolder;
      font-size: 57rpx;
      color: #1B882B;
      line-height: 79rpx;
      letter-spacing: -1.8rpx;
    }

    .checkup-sum-price-wrapper {
      margin-left: 2rpx;

      .checkup-price-unit {
        font-weight: bold;
        font-size: 24rpx;
        color: #1B882B;
        line-height: 33rpx;
      }

      .checkup-sum-price {
        font-size: 16rpx;
        color: #0A5F5D;
        line-height: 22rpx;
        text-decoration: line-through;
        letter-spacing: -0.6rpx;
      }
    }
  }
</style>